<template>
  <view class="index">
    <view class="center">
      <view class="result">
        <view class="left">
          <text class="p">身体质量指数：</text>
          <text class="p"
            ><text class="strong">{{ result.bmi }}</text
            >{{ result.bmiLabel || "" }}</text
          >
        </view>
        <view class="right">
          <text class="p">总成绩：</text>
          <text class="p"
            ><text class="strong">{{ result.score }}</text
            >{{ result.scoreLabel || "" }}</text
          >
        </view>
      </view>
      <view class="ind_from">
        <!-- <view class="row">
          <view class="label">性别</view>
          <view class="value">
            <view
              class="pub_radio"
              :class="{ active: formData.gender == 1 }"
              @click="selectGender(1)"
              >男</view
            >
            <view
              class="pub_radio"
              :class="{ active: formData.gender == 0 }"
              @click="selectGender(0)"
              >女</view
            >
          </view>
        </view> -->
        <view class="row">
          <view class="label">身高</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.height"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">厘米</text>
          </view>
        </view>
        <view class="row">
          <view class="label">体重</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.weight"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">千克</text>
          </view>
        </view>
        <view class="row">
          <view class="label">肺活量</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.vitalCapacity"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">毫升</text>
          </view>
        </view>
        <view class="row">
          <view class="label">坐立体前屈</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.sitAndReach"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">厘米</text>
          </view>
        </view>
        <view class="row">
          <view class="label">立定跳远</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.standingLongJump"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">厘米</text>
          </view>
        </view>
        <view class="row">
          <view class="label">50米跑</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.fiftyMeterRun"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">秒</text>
          </view>
        </view>
        <view class="row">
          <view class="label">1000米跑</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.oneThousandMeterRun"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">秒</text>
          </view>
        </view>
        <!-- <view class="row">
          <view class="label">引体向上(1分钟)</view>
          <view class="value">
            <input
              class="input"
              v-model="formData.pullUps"
              type="number"
              placeholder="请输入"
            />
            <text class="suffix">次</text>
          </view>
        </view> -->
      </view>
      <view class="btn" @click="submit">{{
        isUnlock ? "计算" : "看广告获取计算结果"
      }}</view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
import { globalData } from "@/enums/dataEnums";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      formData: {
        gender: 1,
        height: "170",
        weight: "55",
        vitalCapacity: "4500",
        sitAndReach: "20",
        standingLongJump: "200",
        fiftyMeterRun: "8",
        oneThousandMeterRun: "240",
        pullUps: "20",
      },
      result: {
        score: 0,
        scoreLabel: "不及格",
        bmi: 0,
        bmiLabel: "体重不足",
      },
    };
  },
  onLoad(option) {
    adVideoCreate();
  },
  methods: {
    selectGender(val) {
      this.formData.gender = val;
    },
    calculate() {
      console.log("this.formData", this.formData);
      let heightInMeters = this.formData.height / 100;
      let bmi = this.formData.weight / (heightInMeters * heightInMeters);
      let bmiLabel = "正常体重";
      if (bmi < 18.5) {
        bmiLabel = "体重不足";
      } else if (bmi >= 18.5 && bmi < 24.9) {
        bmiLabel = "正常体重";
      } else if (bmi >= 24.9 && bmi < 29.9) {
        bmiLabel = "超重";
      } else {
        bmiLabel = "肥胖";
      }
      const scoreVitalCapacity = this.scoreByRange(
        parseInt(this.formData.vitalCapacity),
        [3000, 4000],
        20,
        false
      );
      const scoreSitAndReach = this.scoreByRange(
        parseInt(this.formData.sitAndReach),
        [10, 25],
        20,
        false
      );
      const scoreStandingLongJump = this.scoreByRange(
        parseInt(this.formData.standingLongJump),
        [200, 250],
        20,
        false
      );
      const scoreFiftyMeterRun = this.scoreByRange(
        parseInt(this.formData.fiftyMeterRun),
        [8, 15],
        20,
        true
      );
      const scoreOneThousandMeterRun = this.scoreByRange(
        parseInt(this.formData.oneThousandMeterRun),
        [230, 300],
        20,
        true
      );
      console.log("scoreVitalCapacity", scoreVitalCapacity);
      console.log("scoreSitAndReach", scoreSitAndReach);
      console.log("scoreStandingLongJump", scoreStandingLongJump);
      console.log("scoreFiftyMeterRun", scoreFiftyMeterRun);
      console.log("scoreOneThousandMeterRun", scoreOneThousandMeterRun);
      let totalScore =
        scoreVitalCapacity +
        scoreSitAndReach +
        scoreStandingLongJump +
        scoreFiftyMeterRun +
        scoreOneThousandMeterRun;
      this.result.score = totalScore.toFixed(2);
      let scoreLabel = "";
      if (this.result.score >= 90) {
        scoreLabel = "优秀";
      } else if (60 < this.result.score && this.result.score < 90) {
        scoreLabel = "及格";
      } else {
        scoreLabel = "不及格";
      }
      this.result.scoreLabel = scoreLabel;
      this.result.bmi = bmi.toFixed(2);
      this.result.bmiLabel = bmiLabel;
      this.isUnlock = true;
    },
    scoreByRange(value, range, maxScore, reverse) {
      const [min, max] = range;
      if (value < min) return 0;
      if (value > max) return maxScore;
      if (reverse) {
        return maxScore - ((value - min) / (max - min)) * maxScore;
      } else {
        return ((value - min) / (max - min)) * maxScore;
      }
    },
    submit() {
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.calculate();
            });
          } catch (error) {
            this.calculate();
          }
        });
      } else {
        this.calculate();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #f9f5ef;
  margin-top: 20rpx;
  border: 4rpx solid #b39569;
  border-radius: 10rpx;
  .row {
    padding: 16rpx 20rpx;
    display: flex;
    border-bottom: 1px solid #ccc;
    &:last-child {
      border-bottom: 0;
    }
    .label {
      width: 190px;
      flex-shrink: 0;
    }
    .value {
      width: 100%;
      display: flex;
      .input {
        width: 100%;
      }
      .suffix {
        flex-shrink: 0;
      }
    }
    .pub_radio {
      display: inline-block;
      margin-right: 40rpx;
    }
  }
}
.btn {
  margin-top: 30rpx;
  background: #db0000;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .red {
    color: red;
  }
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}
.result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9f5ef;
  margin-top: 10px;

  .left,
  .right {
    width: 100%;
    padding: 10px 10px;
    background: #6f6fff;
    color: #fff;
  }

  .left {
    margin-right: 10px;
  }

  .p {
    display: block;

    .strong {
      font-size: 30px;
      display: inline-block;
      margin-right: 6px;
    }
  }

  .title {
    text-align: center;
    font-size: 30px;
  }
  .desc {
    font-size: 32px;
    text-align: center;
    color: #ff1afe;
  }
}
</style>